@import "../../style/public";

.menu-wrap {
  position: fixed;
  z-index: 101;
  @include remCalc(right, 10);
  @include remCalc(width, 200);
  @include remCalc(top, 120);
  box-sizing: border-box;
  .menu-list {
    box-sizing: border-box;
    position: absolute;
    z-index: 102;
    background: #fff;
    color: #333;
    //@include remCalc(padding, 0, 18);
    @include remCalc(width, 200);
    border-radius: 4px;
    &::before {
      content: "";
      position: absolute;
      top: -16px;
      @include remCalc(right, 30);
      width: 0;
      height: 0;
      border: 8px solid;
      border-color: transparent transparent #fff;
    }
    > li {
      box-sizing: border-box;
      @include thin-border(false, false, top);
      @include remCalc(font-size, 28);
      @include remCalc(line-height, 78);
      @include remCalc(padding, 0,18,0,30);
      &:active{
        background: #ddd;
      }
      &:hover{
        background: #ddd;
      }
      &:first-child {
        &::after {
          display: none;
        }
      }
    }
  }
  .menu-layer {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.56;
    background: #000;

    filter: alpha(opacity=56);
  }
}
